<template>
  <div class="common-list comp-articles" v-loading.fullscreen="loading">
    <div class="common-list__head">
      <el-input class="filter" v-model="filters.title" size="small" style="width: 320px" clearable placeholder="请输入"
                :readonly="loading" @change="search(true)">
        <span slot="prepend">信息标题</span>
      </el-input>
      <el-button class="filter" type="primary" size="small" @click="search()">查询</el-button>
      <el-button class="filter" type="plain" size="small" @click="reset(true)">重置</el-button>
    </div>
    <div class="common-list__nect">
      <slot name="head" :loading="loading" :filters="filters" :selects="selects"></slot>
    </div>
    <div class="common-list__body">
      <el-table ref="table" size="medium" height="100%" :data="list" @header-click="onTableHeaderClick"
                @row-click="onTableRowClick" @selection-change="onTableSelectionChange">
        <el-table-column type="selection" align="center" v-if="select"></el-table-column>
        <el-table-column label="用户名" min-width="12">
          <template #default="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="反馈时间" min-width="12">
          <template #default="scope">
            <span>{{ scope.row.feedbackTimeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="答复人" min-width="12">
          <template #default="scope">
            <span>{{ scope.row.replyUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="答复状态" min-width="12">
          <template #default="scope">
            <span :class="'status'+scope.row.status">{{ statusMap[scope.row.status]||'' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="160" v-if="$slots.body || $scopedSlots.body">
          <template #default="scope">
            <slot name="body" :loading="loading" :filters="filters" :data="scope.row" :selects="selects"></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="common-list__foot" :class="{ 'common-list__foot--slot': $slots.foot || $scopedSlots.foot }">
      <el-pagination background layout="total,sizes,prev,pager,next,jumper" :page-sizes="[10, 20, 50, 100]"
                     :page-size="filters.linage" :current-page="filters.page" :total="filters.total"
                     @size-change="onTableLinageChange" @current-change="onTablePageChange"></el-pagination>
      <slot name="foot" :loading="loading" :filters="filters" :selects="selects"></slot>
    </div>
  </div>
</template>

<script>
import mixin from "../mixin";
import {object, array, string, int, session} from "../util";

export default {
  name: "comp-sys-feedbacks",
  mixins: [mixin],
  props: {
    type: {type: String, default: null},
    tagId: {type: String, default: null},
    select: {type: Boolean, default: false},
    link: {type: Boolean, default: false},
  },
  data: () => ({
    loading: false,
    filters: {
      ids: null,
      type: null,
      title: null,
      referer: null,
      author: null,
      tagId: null,
      published: null,
      linage: 10,
      page: 1,
      total: 0,
      startTime: null,
      isTop: null
    },
    list: [],
    selects: [],
    tags: [],
    statusMap:{
      '0':'待答复',
      '1':'已答复'
    }
  }),
  methods: {
    reset(deep) {
      let data = deep ? {} : object(session([this.env.key, this.$options.name, "filters", this.$route.fullPath]));
      this.filters = Object.assign(this.$options.data().filters, data);
      if (this.$route.query?.startTime) {
        this.filters.startTime = this.$route.query.startTime
      }
      this.loading = false
      this.search(true);
    },
    validate() {
      let filters = this.filters;
      let tags = this.tags;
      filters.ids = null;
      filters.type = this.type;
      filters.tagId = this.tagId || string(() => tags.find((tag) => tag.id === filters.tagId).id) || null;
      filters.total = Math.max(int(filters.total), 0);
      filters.linage = Math.max(int(filters.linage), 1);
      filters.page = Math.max(Math.min(int(filters.page), Math.ceil(filters.total / filters.linage)), 1);
      session([this.env.key, this.$options.name, "filters", this.$route.fullPath], filters);
    },
    onTableHeaderClick() {
      this.select && this.$refs.table.toggleAllSelection();
    },
    onTableRowClick(row) {
      this.select && this.$refs.table.toggleRowSelection(row);
    },
    onTableLinageChange(value) {
      this.filters.linage = value;
      this.search(true);
    },
    onTablePageChange(value) {
      this.filters.page = value;
      this.search(true);
    },
    onTableSelectionChange(selects) {
      this.filters.ids = selects.map((data) => data.id);
      this.selects = selects;
    },
    chooseTag(action, tag) {
      if (this.loading) return;
      let filters = this.filters;
      if (!action || action === "start") {
        this.$refs.tagPicker.init();
        this.$nextTick(() => this.$refs.tagPickerList.init());
      } else if (action === "submit") {
        let index = this.tags.findIndex((target) => target.id === tag.id);
        if (index > -1) this.tags.splice(index, 1);
        filters.tagId = tag.id;
        this.tags.push({id: tag.id, name: tag.name});
        this.chooseTag("end");
        this.search(true);
      } else if (action === "end") {
        this.$refs.tagPicker.close();
      }
    },
    search(clean) {
      if (this.loading) return;
      if (clean) this.list = [];
      if (clean) this.selects = [];
      let filters = this.filters;
      this.validate();
      this.loading = true;
      this.plugins.user.sysFeedbackGets(this.filters).then((res) => {
        this.loading = false;
        this.list = [];
        this.selects = [];
        this.$nextTick(() => this.$refs.table.doLayout());
        if (res.code === 0) {
          let data = res.data;
          if (data.page > 1 && data.list.length === 0) {
            filters.total = 0;
            this.search();
          } else {
            filters.total = data.total;
            this.list = data.list;
            this.validate();
          }
        } else {
          filters.total = 0;
          this.validate();
          this.plugins.modal.toast("列表加载失败<br>" + res.code + "：" + res.msg, "error");
        }
      });
    },
    init() {
      this.loading = true;
      this.reset();
    },
  },
};
</script>

<style lang="scss">
.comp-articles {
  overflow: hidden;
}
.status0{
  &:before{
    content:'';
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background: #f1c617;
    margin: 0 5px;
  }
}

.status1{
  &:before{
    content:'';
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background: #07ef1b;
    margin: 0 5px;
  }
}
</style>
